<template>
  <div>
    <div class="tableBtn" v-if="isShowBtn">
      <el-button type="primary" @click="handleAdd">{{ title }}</el-button>
    </div>
    <div :class="isShowBtn ? 'addSearchTable' : 'table'">
      <el-table :data="tableData" style="width: 100%">
        <template v-if="isSelection">
          <el-table-column type="selection" width="55" />
        </template>
        <el-table-column type="index" label="序号" width="70" />
        <template v-for="(item, index) in column" :key="index">
          <el-table-column
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div v-if="item.dataType === 'tag'">
                <el-tag
                  size="large"
                  class="elTag"
                  :color="scope.row.color || 'rgb(86, 156, 203)'"
                >
                  {{ scope.row[item.prop] }}
                </el-tag>
              </div>

              <div
                v-else-if="item.dataType === 'option'"
                :class="item.operation.length > 1 ? 'button' : 'noFlex'"
              >
                <div v-for="(o, key) in item.operation" :key="key">
                  <el-button
                    :class="
                      o && o.type === 'danger' ? 'del-button' : 'other-btn'
                    "
                    :disabled="(o && o.disabled) || false"
                    text
                    :type="(o && o.type) || 'primary'"
                    :size="(o && o.size) || 'default'"
                    @click="o && o.clickFun(scope.row)"
                  >
                    {{ o && o.name }}
                  </el-button>
                </div>
              </div>
              <div v-else-if="item.dataType === 'text'">
                <span class="ellipsis-text">{{ scope.row[item.prop] }}</span>
              </div>
              <div v-else-if="item.dataType === 'slot'">
                <slot :name="item.slotName" :scope="scope.row"></slot>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <Pagination
      :total="pagination.total"
      :page="pagination.page"
      :limit="pagination.limit"
      :pageSizes="pagination.pageSizes"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
    />
  </div>
</template>

<script setup>
import Pagination from "@/components/Pagination/pageination.vue";
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  title: String,
  isShowBtn: Boolean,
  isSelection: {
    type: Boolean,
    default: false,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  column: {
    type: Array,
    default: () => [],
  },
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 10,
      page: 1,
      limit: 10,
      pageSizes: [10, 20, 30, 50],
    }),
  },
});

const emit = defineEmits(["handleAdd", "sizeChange", "currentChange"]);

const handleAdd = () => {
  emit("handleAdd");
};

const sizeChange = (size) => {
  console.log("sizeChange", size);
  emit("sizeChange", size);
};

const currentChange = (page) => {
  console.log("currentChange", page);
  emit("currentChange", page);
};
</script>

<style lang="scss" scoped>
.tableBtn {
  height: 20px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.button {
  display: flex;
  justify-content: space-between;
}

.noFlex {
  display: flex;
  justify-content: center;
}

.elTag {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.btn {
  font-size: 15px;
}
.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
